<template>
<div class="container">
    <div class="body-top">
        <div class="top-title">他山之石</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="学习他人" name="first" v-if="_SHOWBTN('wzgl-cflt-tszs-xxtr')">
                <Study></Study>
            </el-tab-pane>
            <el-tab-pane label="武装自己" name="second" v-if="_SHOWBTN('wzgl-cflt-tszs-wzzjbsy')">
                <Armed></Armed>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>

<script>
import Study from "./Study";
import Armed from "./Armed";

export default {
    components: {
        Study,
        Armed
    },
    data() {
        return {
            activeName: this.$store.state.PortalManagement.outsideBoxActive,
        };
    },
    watch: {
        "$store.state.PortalManagement.outsideBoxActive": function (newVal, oldVal) {
            // console.log(newVal, oldVal)
            this.$store.commit("PortalManagement/SET_PAGE_SIZE", 10)
            this.$store.commit("PortalManagement/SET_PAGE_NUM", 1)
        }
    },
    methods: {
        handleClick(tab, event) {
            // console.log(tab, event);
            this.$store.commit("PortalManagement/SET_OUTSIDE_BOX_ACTIVE", tab.name)
        },

    }
};
</script>

<style lang="less" scoped>
.body-top {
    .top-title {
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 28px;
        padding-left: 10px;
    }
}

/**tab-every */
/deep/.el-tabs__item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 22px;
    margin-top: 14px;
}

/**tab底下1px线 */
/deep/.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e4e7ed;
}

/deep/.el-tabs__nav,
.is-top {
    margin-left: 9px;
}

/deep/#tab-second {
    padding-left: 40px;
    padding-right: 40px;
}

/deep/.el-icon-arrow-up {
    left: -25px;
}
</style>
